<template>
  <div class="app-container">
    <div class="banner">
      <Banner></Banner>
    </div>
    <div class="Filter">
      <AFilter @query="query" />
    </div>
    <div class="main">
      <el-table vloading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="ID" width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="姓名" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="联系方式" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="求职状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.jobStatus | jobStateFilter}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="性别" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.sexId | sexFilter(sexData)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="年龄" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.age }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="学历" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.educationId | educationFilter(educationData)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="工作经验" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.workStart | workExperienceFilter}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="E力值" show-overflow-tooltip prop="ePower">
        </el-table-column>

        <el-table-column align="center" label="求职岗位" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.postTypeName ? scope.row.postTypeName : '-'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="薪资要求" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.salaryMin | salaryFilter(scope.row.salaryMax)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="简历详情" show-overflow-tooltip>
          <!-- <template slot-scope="scope">
          </template> -->
        </el-table-column>

        <el-table-column align="center" label="更新时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | formatUpdateTime}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="状态标记" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getPhone(scope.row)" v-if="isCommunicate(scope.row.mobile)">建立电话沟通</el-button>
            <el-button type="info" size="mini" v-else disabled>已建立沟通</el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" label="举报/维护" width="150px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="accusation(scope.row)" disabled>举报</el-button>
            <el-button type="primary" size="mini" @click="maintain(scope.row)" disabled>维护</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align:center; margin-top: 20px;">
        <el-pagination
          background
          :page-size="page.limit"
          layout="prev, pager, next"
          :total="page.total"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { search } from '@/api/web/interview'
import Banner from './components/Banner'
import AFilter from './components/Filter'

export default {
  name: "Index",
  components:{Banner,AFilter},
  data(){
    return{
      list: [],
      sexData: [],
      educationData: [],
      listLoading: false,
      form: {
        areaCode: '',
        educationId: '',
        jobstatus: '',
        postType: '',
        salaryId: '',
        sexId: '',
        workexperienceId: ''
      },
      page: {
        pageNo: 1,
        total: 0,
        limit: 20
      }
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods:{
    isCommunicate (mobile) {
      return mobile.includes('****')
    },
    accusation (el) {
      this.$confirm(`确认该求职信息为虚假信息吗？系统核实后，您将获得${el.ePower * 4}E豆奖励！`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$fetch(this.$api.accusationAdd, {
          talentId: el.id,
          talentId: el.id
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('举报成功')
            this.getfullList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消举报'
        });          
      });
    },
    maintain (el) {
      this.$confirm(`确认维护该人才的求职状态为：在职-暂不考虑吗？系统核实后，您将获得${el.ePower * 4}E豆奖励！`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$fetch(this.$api.upgradeJobStatus, {
          talentId: el.id,
          state: 'work'
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('维护成功')
            this.getfullList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消维护'
        });          
      });
    },
    getPhone (el) { // 建立电话联系
    this.$confirm(`您需支付${el.ePower * 3}E豆获取该人才联系方式!`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$fetch(this.$api.establishContact, {
          talentId: el.id
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('建立成功')
            this.getfullList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消建立电话沟通'
        });          
      });
    },
    getfullList () { // 获取列表数据
      let self = this
      let params = {
        pageNo: self.page.pageNo,
        limit: self.page.limit,
        areaCode: this.form.areaCode,
        educationId: this.form.educationId,
        jobstatus: this.form.jobstatus,
        postType: this.form.postType,
        salaryId: this.form.salaryId,
        sexId: this.form.sexId,
        workexperienceId: this.form.workexperienceId,
        updateTimeType: this.form.updateTimeType
      }
      self.$fetch(self.$api.fullList, params).then(res => {
        self.list = res.page.records
        this.page.total = res.page.total
      })
    },
    currentChange (el) {
      this.page.pageNo = el
      this.getfullList()
    },
    query(el) { // 查询按钮事件
      this.form = {
        areaCode: el.areaCode.join(','),
        educationId: el.education,
        jobstatus: el.jobstatus,
        postType: el.postType.join(','),
        salaryId: el.salary,
        sexId: el.sexId,
        workexperienceId: el.workexperience,
        updateTimeType: el.updateTimeType
      }
      this.page.pageNo = 1
      this.getfullList()
    }
  },
  created(){
    this.getfullList()
    this.$fetch(this.$api.sex).then(res => { // 请求性别数据
      this.sexData = res.data
    })
    this.$fetch(this.$api.education).then(res => { // 请求性学历数据
      this.educationData = res.data
    })
  }
}
</script>

<style scoped>
.Filter{
  margin-top: 20px;
}
</style>
